{% extends "base.html" %}
{% block title %}  {% endblock %}
{% block head %}
	{{ parent() }}
{% endblock %}


{%block css%}
		<link rel="stylesheet" href="{{base_url}}views/css/style.css">
		<link rel="stylesheet" href="{{base_url}}views/css/navbar/navbar.css">
		<link rel="stylesheet" href="{{base_url}}views/css/navbar/navbar_2.css">
{%endblock%}


{%block header %}	
		<header> 
			<div class="header">

				<div class="head">
					<div class="logo_main">
						<img src="../views/img/logo_main.png" alt="">
					</div>
					<div class="head-right">
						{{ render('/authcontrol') }}	
						<div class="search">
							<div>
								<input type="text"><button class="button-blue">  >> </button>
							</div>
						</div>
					</div>
				</div>


				<div class="navbar">
				  <div class="navbar-inner">
				    <ul class="nav">
				      <li class="" ><a href="{{base_url}}">ГЛАВНАЯ</a></li>
				      <li class="divider-vertical"></li>
				      <li class="" ><a href="{{base_url}}aboutproject">О ПРОЕКТЕ</a></li>
				      <li class="divider-vertical"></li>
				      <li class="" ><a href="{{base_url}}garant">ГАРАНТИИ</a></li>
				      <li class="divider-vertical"></li>
				      <li class="" ><a href="{{base_url}}contacts">КОНТАКТЫ</a></li>
				      <li class="divider-vertical"></li>
				      <li class="" ><a href="{{base_url}}about">О НАС</a></li>
				    </ul>
				  </div>
				</div>
			</div>
		</header>



{% endblock%}

	

{% block content %}
	
<style>
	body{
		background-color: #3d3c3c;
	}
	.project_block {
		width:1040px;
		margin-top: 20px;
		margin-right: auto;
		margin-left: auto;
		background-color: #f1f1f2;
	}	
	.sub_menu {
		font-size: 15px;
		background-color: #e3e3e3;
		padding: 3px 3px 3px 35px;

	}

	.title_img{
		float:left;
		width:600px;

	}
	.title_img > img{
		margin: 15px;
		padding:5px;
		width:500px;
		border:1px solid grey;
	}

	.project_info{
		float:right;
	}

	.clear-fix {
		clear:both;
	}
</style>

<div class="project_block">
		<div class="sub_menu">
			<h1><a href="{{base_url}}projects">Проекты</a> > {{prj.title}}</h1>
		</div>
	
	<div>
			<div class="title_img">
				<img src="{{prj.project_img}}" alt="">
			</div>
			<div class="project_info">
				
			</div>
			<div class="clear-fix"></div>
	</div>


	<style>
		.editbar{
			float:right;
		}

		footer {
			margin-top:0;
		}

		.edit-content{
			/*max-width: 60%	*/
		}
		.content{
			width:1040px;
			margin-right: auto;
			margin-left: auto;
		}


		.tabs{
			margin-top: 15px;
			margin-left: 15px;
		}
		.tabs-menu{

		}

		.tab {

			display:none;
		}
		.active-tab {
			display:block;
		}
	
		.tab-menu {
			padding:15px;
			border: 1px solid #ccc;
			color:#3e3e3e;
			
		}
		.tab-menu:hover {
			background-color: #e5e5e5;
			color:#3e3e3e;

		}
		.tab-menu-active {
			background-color: silver;
		}
		.tab-menu-active:hover {
			background-color: #ccc;
			color:#3e3e3e;

		}

	</style>	
	
	<div class="content">
		<div class="edit-content" >
			<div class="tabs">
				<div class="tabs-menu">
					<a herf="#" class="tab-menu tab-menu1 tab-menu-active">О проекте</a>
					<a herf="#" class="tab-menu tab-menu2">Новости</a>
					<a herf="#" class="tab-menu tab-menu3">Комментарии</a>
					<a herf="#" class="tab-menu tab-menu4">Спонсоры</a>
				</div>	
				
				<div class="tab tab1 active-tab">	
							{{editor | raw}} 	
								
							{% if user_var.role < 3 %}
							<div class="editbar">
								<fieldset>
									<button data-bind="click:views.editor.enable">Edit</button>
									<button data-bind="click:views.editor.disable">Cancel</button>
									<button data-bind="click:views.editor.save">Save</button>
								</fieldset>
								<form enctype="multipart/form-data" action="{{base_url}}upload/" method="post">
									<input type="hidden" name="MAX_FILE_SIZE" value="3000000">
									<input type="hidden" name="route" value="{{base_url}}project/{{id}}">
									Добавить файл в галлерею : <input name="userfile" type="file">
									<input type="submit" value="Send File">
								</form>
								<input type="text" data-bind="value:filename, click:views.pics.select">
								<div class="galery" data-bind="foreach:views.pics.pics">
									<img class="galery-pics" alt="" data-bind="attr:{src:src_up}, click:click">
								</div>	
							</div>
							{% endif %}
	
							<div class="clear-fix"></div>

				</div>	
				<div class="tab tab2">	{{news | raw}}	</div>	
				<div class="tab tab3"> 	{{comments | raw}} </div>	
				<div class="tab tab4"> 	{{sponsors | raw}} </div>	
			</div>
		</div>

		<script>


		</script>

		

		{% if user_var.role < 3 %}
		<style>
			.static-page{
				margin:150px;
				margin-left:0;
				margin-right:0;
				float:left;
			}
			
			.edit-content{
				
			}
			.editbar{
				width:300px;
				float:right;
			}
			.galery {
				width:300px;
				margin-left:auto;
				margin-right: auto;
				overflow-x:scroll; 
				overflow-y:hidden
			}
			.galery-pics {
				display: block;
				max-height: 250px ;
				margin-left:auto;
				margin-right:auto;
				padding:5px;
				border:1px solid grey;
			}
			
		</style>	

		

	
	</div>		

</div>
		

	<script>
		window.views = window.views || {};	
		window.views.pics = window.views.pics || {};	
		window.views.pics.base_url = {{base_url}}
		var PicsData  = {{pics_data | raw}};
	</script>
		
				
				<script>
					window.views = window.views || {};	
					window.views.editor = window.views.editor || {};	
					window.views.editor.base_url = "{{base_url}}";
					window.views.editor.url = "/{{id}}" ;
					
					window.views.pics = window.views.pics || {};	
					window.views.pics.base_url = {{base_url}}
					var PicsData  = {{pics_data | raw }}
				</script>
				<script src="../views/js/editor.js"></script>
				<script src="../views/js/pics.js"></script>
		{% endif %}

	
{% endblock %}

{% block footer %}

		<footer>
			<div class="footer">
				<div class='paysystem'>
					<table>
						<tr>
							<td><img src="../views/img/paysystem_icon_11.png" alt=""></td>
							<td><img src="../views/img/paysystem_icon_12.png" alt=""></td>
							<td><img src="../views/img/paysystem_icon_13.png" alt=""></td>
						</tr>
						<tr>
							<td><img src="../views/img/paysystem_icon_21.png" alt=""></td>
							<td><img src="../views/img/paysystem_icon_22.png" alt=""></td>
							<td><img src="../views/img/paysystem_icon_23.png" alt=""></td>
						</tr>
						<tr>
							<td><img src="../views/img/paysystem_icon_31.png" alt=""></td>
							<td><img src="../views/img/paysystem_icon_32.png" alt=""></td>
							<td><img src="../views/img/paysystem_icon_33.png" alt=""></td>
						</tr>
					</table>
				</div>




				<div class="bottom-menu">
					<table>
						<tr>
							<td>
								<ul>
									<li>Главная</li>
									<li>Новости</li>
									<li>О проекте</li>
									<li>Контакты</li>
								</ul>
							</td>
							<td>
								<ul>
									<li>О нас</li>
									<li>Блог</li>
									<li>Проекты</li>
									<li>Наша сеть</li>
								</ul>
							</td>
						</tr>
					</table>
				</div>
				<div class="socnet">
					Мы в сети <br>
					<img src="../views/img/net_icon_1.png" alt="">	
					<img src="../views/img/net_icon_2.png" alt="">	
					<img src="../views/img/net_icon_3.png" alt="">	
					<img src="../views/img/net_icon_4.png" alt="">	
					<img src="../views/img/net_icon_5.png" alt="">	
					<img src="../views/img/net_icon_6.png" alt="">	
				</div>
			</div>	
			
		</footer>



{% endblock %}





{% block scripts %}
	
	<script>
		$(function(){
			$(".tab-menu").click(function(){
				var curclass = "";
				_.each( $(this).attr('class').split(' ') , function(val){
					if(val !== 'tab-menu' && val !== 'tab-menu-active'){
						curclass = val;
					}
				});
				var curtab = curclass.slice(-1);
				
				var oldclass = '';
				var oldtab = '';	

				$oldtab = $('.tab-menu-active');
				$oldtab.removeClass('tab-menu-active')
				_.each( $oldtab.attr('class').split(' ') , function(val){
					if(val !== 'tab-menu' && val !== 'tab-menu-active'){
						oldclass = val;
					}
				});	
				oldtab = oldclass.slice(-1);

				$('.tab'+oldtab).removeClass('active-tab');
				$('tab'+oldtab).hide();

				$(this).addClass('tab-menu-active');
				$('.tab'+ curtab).addClass('active-tab');
				$('tab'+ curtab).show();

			});
		});
	</script>


	<script src="../views/lib/tinymce/tinymce.min.js"></script>
	<script src="../views/js/auth.js"></script>
	<script src="../views/js/static.js"></script>
	
{% endblock %}
